<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>商品秒杀系统</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.time-countdown {
				color: #F56C6C;
				font-size: 18px;
				font-weight: bold;
			}

			.seckill-card {
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<a href='../../index.html'>返回首页</a>
			<a href='../login/login.html'>返回登陆页面</h3>
			<el-container>
				<el-header style="background-color: #E74C3C;color: white;">
					<h1>限时秒杀专场</h1>
				</el-header>
				<el-main>
					<!-- 秒杀倒计时 -->
					<el-card class="seckill-card">
						<div slot="header">
							<span>距离结束还剩：</span>
							<span class="time-countdown">{{ countdown }}</span>
						</div>
						<el-row :gutter="20">
							<el-col :span="6" v-for="(item, index) in seckillList" :key="index">
								<el-card :body-style="{ padding: '0px' }">
									<img src="https://picsum.photos/300/200?random=1" class="image" alt="秒杀商品图片">
									<div style="padding: 14px;">
										<span>{{ item.id }}</span>
										<div class="bottom">
											<span
												style="color: #F56C6C;font-size: 18px;">¥{{ item.seckillPrice }}</span>
											<span
												style="color: #F56C6C;font-size: 18px;">数量：{{ item.seckillNumber }}</span>
											<el-button type="danger" size="mini" @click="handleSeckill(item)">
												立即抢购
											</el-button>
										</div>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-card>


				</el-main>
			</el-container>
		</div>

		<script src="../../js/vue.min.js"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						countdown: '02:30:45',
						seckillList: []
					}
				},
				methods: {
					handleSeckill(item) {
						this.$confirm(`确认秒杀 ${item.name}?`, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {

							let data = new URLSearchParams()
							data.append('seckillId', item.id)
							axios({
								method: 'post',
								url: 'http://localhost:9000/seckill',
								data: data,
								headers: {
									token: localStorage.getItem('token')
								}
							}).then(resp => {
								if (resp.data.success) {
									this.$message.success('成功');
								} else {
									this.$message.error(resp.data.error);
								}

							})
						}).catch(() => {
							this.$message.info('已取消');
						});
					},
					loadAllSeckill() {
						axios({
							method: 'get',
							url: 'http://localhost:9000/seckill/load',
							headers: {
								token: localStorage.getItem('token')
							}
						}).then(resp => {
							this.seckillList = resp.data.data
						})
					}
				},
				created() {
					this.loadAllSeckill()
				}
			});
		</script>
	</body>
</html>